<template>
	<view class="makemoney">
		<view class="makemoney-header">
			<view class="header-img"></view>
			<view class="header-border"></view>
		</view>
		<view class="makemoney-content">
			<view class="makemoney-content-top box-content">
				<view class="top-title title-text">我的收益</view>
				<view class="u-flex u-flex-around top-item">
					<view class="top-item-list">
						<image class="list-img" :src="getimageUrl('haoyou.png')"></image>
						<view class="title-text">{{userInvite.memberNum}}人</view>
						<text class="lixt-text">已邀请</text>
					</view>
					<view class="top-item-list">
						<image class="list-img" :src="getimageUrl('fenxiao.png')"></image>
						<view class="title-text">{{userInvite.todayInvite}}元</view>
						<text class="lixt-text">今日邀请收入</text>
					</view>
					<view class="top-item-list">
						<image class="list-img" :src="getimageUrl('yongjin.png')"></image>
						<view class="title-text">{{userInvite.income}}元</view>
						<text class="lixt-text">邀请总收入</text>
					</view>
				</view>
				<view class="top-footer">
					<u-button type="primary" hairline="false" shape="circle" size="small" text="立即邀请" color="#FF5151"
						@tap="otInviteMerchant"></u-button>
				</view>
			</view>

			<view class="box-content makemoney-content-middle">
				<view class="u-flex u-flex-center u-flex-items-center middle-title">
					<text class="title-text">我的等级{{userLevelMoney.grade}}</text>
					<view class="u-flex middle-title-left" @tap="topInvitationRules">
						邀请规则
						<u-icon name="arrow-right" color="#979797" size="18rpx"></u-icon>
					</view>
				</view>
				<view class="u-flex u-flex-center middle-title-assistant" v-if="userLevelMoney.invitation !== false">
					本月再邀{{userLevelMoney.invitation - Number(userInvite.memberNum) }}人可升至V2
				</view>
				<view class="middle-list-item">
					<view class="u-flex u-flex-between middle-list">
						<text>好友完成首单</text>
						<view><text class="list-mark">+{{userLevelMoney.one}}</text>&nbsp;元</view>
					</view>
					<view class="u-flex u-flex-between middle-list">
						<text>好友完成第2单</text>
						<view><text class="list-mark">+{{userLevelMoney.two}}</text>&nbsp;元</view>
					</view>
					<view class="u-flex u-flex-between middle-list">
						<text>好友完成第3单</text>
						<view><text class="list-mark">+{{userLevelMoney.three}}</text>&nbsp;元</view>
					</view>
					<view class="u-flex u-flex-between middle-list">
						<text>好友后续下单</text>
						<text class="list-mark">{{userLevelMoney.follow}}</text>
					</view>
				</view>
			</view>

			<view class="box-content makemoney-content-foter">
				<view class="u-flex u-flex-center title-text">排行榜</view>
				<view class="u-flex u-flex-between foter-list-check">
					<view class="check-text" :class="checkValue === item.value ? 'check-text-active':''"
						v-for="item in checkList" :key="item.value" @tap="handleCheckList(item)">
						{{item.text}}
					</view>
				</view>
				<view class="u-flex u-flex-between foter-list-main">
					<view class="list-main list-main-strewn">
						<image class="img-title" :src="getimageUrl('n02.png')" mode=""></image>
						<view v-if="!!inviteRankingListData[1]">
							<image class="img-head"
								:src="inviteRankingListData[1]?.avatar?inviteRankingListData[1]?.avatar: getimageUrl('user-p.png')"
								mode="">
							</image>
							<view class="foter-list-name">
								{{inviteRankingListData[1]? inviteRankingListData[1]?.realname : ''}}
							</view>
							<view class="foter-list-num">
								已邀请
								<text
									class="num-text">{{inviteRankingListData[1]? inviteRankingListData[1]?.memberNum : ''}}</text>
								人
							</view>
							<view class="foter-list-money">
								{{inviteRankingListData[1]? inviteRankingListData[1]?.income : ''}}
								<text class="money-unit">元</text>
							</view>
						</view>
						<view class="footer-triangle footer-triangle-r"></view>
						<view class="footer-triangle footer-triangle-l"></view>

					</view>
					<view class="list-main list-main-on1">
						<image class="img-title" :src="getimageUrl('no1.png')" mode=""></image>
						<view v-if="!!inviteRankingListData[0]">
							<image class="img-head"
								:src="inviteRankingListData[0]?.avatar?inviteRankingListData[0]?.avatar: getimageUrl('user-p.png')"
								mode=""></image>

							<view class="foter-list-name">
								{{inviteRankingListData[0]? inviteRankingListData[0]?.realname : ''}}
							</view>
							<view class="foter-list-num">
								已邀请
								<text
									class="num-text">{{inviteRankingListData[0]? inviteRankingListData[0]?.memberNum : ''}}</text>
								人
							</view>
							<view class="foter-list-money">
								{{inviteRankingListData[0]? inviteRankingListData[0]?.income : ''}}
								<text class="money-unit">元</text>
							</view>
						</view>
						<view class="footer-triangle footer-triangle-r"></view>
						<view class="footer-triangle footer-triangle-l"></view>
					</view>
					<view class="list-main list-main-strewn">
						<image class="img-title" :src="getimageUrl('no3.png')"></image>
						<view v-if="!!inviteRankingListData[2]">
							<image class="img-head"
								:src="inviteRankingListData[2]?.avatar?inviteRankingListData[2]?.avatar: getimageUrl('user-p.png')">
							</image>
							<view class="foter-list-name">
								{{inviteRankingListData[2]? inviteRankingListData[2]?.realname : ''}}
							</view>
							<view class="foter-list-num">
								已邀请
								<text
									class="num-text">{{inviteRankingListData[2]? inviteRankingListData[2]?.memberNum : ''}}</text>
								人
							</view>
							<view class="foter-list-money">
								{{inviteRankingListData[2]? inviteRankingListData[2]?.income : ''}}
								<text class="money-unit">元</text>
							</view>
						</view>
						<view class="footer-triangle footer-triangle-r"></view>
						<view class="footer-triangle footer-triangle-l"></view>
					</view>
				</view>
				<view class="list-table">
					<view class="list-table-header">
						<u-row class="list-table-item" justify="space-between" gutter="10">
							<u-col span="2">排名</u-col>
							<u-col span="4">用户名</u-col>
							<u-col span="3">邀请人数</u-col>
							<u-col span="3">金额</u-col>
						</u-row>
					</view>
					<view class="list-table-body">
						<u-row class="list-table-item" justify="space-between" gutter="20"
							v-for="(item,index) in inviteRankingListData.slice(3)" :key="item.userId">
							<u-col span="2"><text class="table-body-index">{{index+3}}</text></u-col>
							<u-col span="4" textAlign="center">
								<view class="u-flex u-flex-items-center">
									<image style="width: 60rpx; height: 60rpx;" :src="item.avatar">
									</image>
									<text class="table-body-people">{{item.realname}}</text>
								</view>
							</u-col>
							<u-col span="3">
								<text class="table-body-people">{{item.memberNum}}</text>
							</u-col>
							<u-col span="3">
								<view class="u-flex u-flex-items-center table-body-price">
									{{item.income}}
									<text class="price-unit">元</text>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import { queryUserInvite, queryUserLevel, inviteRankingList } from '@/common/mine.api';
	import { getimageUrl } from '@/util/util.js';

	let checkValue = ref(0)
	let checkList = [{ value: 0, text: "总榜", type: null }, { value: 1, text: "月榜", type: 'month' }, { value: 2, text: "周榜", type: 'week' }]

	function classListTypeBg(type) {
		var genderMap = {
			'1': {
				grade: 'LV1', one: '2', two: '3', three: '4', follow: '最高5元', invitation: 10,
			},
			'2': {
				grade: 'LV2', one: '2', two: '3', three: '5', follow: '最高5元', invitation: 30,
			},
			'3': {
				grade: 'LV3', one: '3', two: '4', three: '5', follow: '最高5元', invitation: 50,
			},
			'4': {
				grade: 'LV4', one: '4', two: '5', three: '6', follow: '最高6元', invitation: 100,
			},
			'5': {
				grade: 'LV5', one: '5', two: '6', three: '7', follow: '最高7元', invitation: 150,
			},
			'6': {
				grade: 'LV6', one: '6', two: '7', three: '8', follow: '最高8元', invitation: 200,
			},
			'7': {
				grade: 'LV7', one: '7', two: '8', three: '9', follow: '最高9元', invitation: false,
			},
		};
		return genderMap[type]
	}

	let userLevelMoney = ref({
		grade: '', one: '', two: '', three: '', follow: '', invitation: 0
	})

	const userInvite = ref({
		income: 0,
		memberNum: 0,
		memberOrderNum: 0,
		todayInvite: 0
	})

	const inviteRankingListData = ref([])

	async function handleCheckList(item) {
		checkValue.value = item.value
		inviteRankingListData.value = await inviteRankingList({ type: item.type })
	}

	onShow(async () => {
		let res = await queryUserLevel()
		userLevelMoney.value = classListTypeBg(res)
		userInvite.value = await queryUserInvite()
		inviteRankingListData.value = await inviteRankingList()
	})

	function otInviteMerchant() {
		uni.navigateTo({
			url: "/pages/personalCenter/inviteMerchant"
		});
	}

	function topInvitationRules() {
		uni.navigateTo({
			url: "/pages/makeMoney/invitationRules"
		});
	}
</script>

<style lang="scss" scoped>
	.makemoney {
		margin-bottom: 10rpx;
		background: linear-gradient(180deg, #FF2A47 0%, #FE7E17 100%);
		border-radius: 0rpx 0rpx 36rpx 36rpx;

		.makemoney-header {
			height: 540rpx;
			background: linear-gradient(180deg, #FD5F20 0%, #FFF2C7 100%);
			padding-top: 100rpx;
			position: relative;
			border-radius: 10;
			overflow: hidden;

			.header-img {
				height: 440rpx;
				width: 75%;
				padding-top: 100rpx;
				margin: auto;
				background: url(http://qianxueapplet.suoeryun.com/world_benefits_user/makemoney.png) no-repeat;
				background-size: contain;
				background-size: cover;
				position: relative;
				z-index: 100;
			}

			.header-border {
				position: absolute;
				top: -21%;
				right: -47%;
				height: 110%;
				width: 190%;
				border-radius: 50%;
				border: 33rpx solid #F9F270;
				z-index: 100;
			}
		}

		// 内容公用样式
		.box-content {
			margin: 0 20rpx;
			padding: 20rpx 40rpx;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
		}

		// title 内容公用样式
		.title-text {
			font-size: 32rpx;
			font-weight: 500;
		}

		.makemoney-content {
			position: relative;
			top: -62rpx;
			// height: 600rpx;
			background: linear-gradient(180deg, #FF2A47 0%, #FE7E17 100%);
			border-radius: 0rpx 0rpx 36rpx 36rpx;
			padding-top: 90rpx;

			// margin-bottom: -62rpx;
			.makemoney-content-top {
				color: #333333;
				text-align: center;

				.top-title {
					margin-bottom: 20rpx;
				}
			}

			.top-item-list {
				width: 30%;

				.list-img {
					width: 45rpx;
					height: 45rpx;
				}

				.lixt-text {
					font-size: 24rpx;
					font-weight: 500;
					color: #666666;
				}
			}

			.top-footer {
				margin-top: 30rpx;
			}

			.makemoney-content-middle {
				margin-top: 20rpx;
				font-size: 22rpx;
				font-weight: 400;
				color: #333333;

				.middle-title {
					position: relative;
					margin-bottom: 10rpx;

					.middle-title-left {
						position: absolute;
						right: 0;
					}
				}

				.middle-title-assistant {
					font-size: 24rpx;
					margin-bottom: 10rpx;
				}

				.middle-list-item {
					margin-top: 10rpx;

					.middle-list {
						margin: 10rpx 0 10rpx 0;

						.list-mark {
							font-weight: 500;
							color: #FF2A47;
						}
					}
				}
			}

			.makemoney-content-foter {
				margin-top: 20rpx;

				.foter-list-check {
					margin-top: 20rpx;

					.check-text {
						font-size: 32rpx;
						font-weight: 500;
						color: #9E9E9E;
						background: #E7E7E7;
						border-radius: 68rpx;
						padding: 12rpx 40rpx 12rpx 40rpx;
						transition-duration: 300ms;
						margin: 0 20rpx;
					}

					.check-text-active {
						color: #FFFFFF;
						background: #FF5046;
					}
				}

				.foter-list-main {
					overflow: hidden;
					margin-top: 20rpx;
					padding: 60rpx 0 40rpx 0;

					.list-main {
						width: 30%;
						text-align: center;
						position: relative;
						background-color: #F0F4F7;
						position: relative;
						border-radius: 12rpx;
						padding-bottom: 60rpx;

						.img-title {
							position: absolute;
							top: -10%;
							right: 10%;
							width: 140rpx;
							height: 140rpx;
						}

						.img-head {
							margin-top: 100rpx;
							width: 150rpx;
							height: 150rpx;
							border-radius: 50%;
							overflow: hidden;
						}

						.foter-list-name {
							font-size: 34rpx;
							font-weight: 500;
							margin: 12rpx 0;
						}

						.foter-list-num {
							font-size: 28rpx;
							font-weight: 400;
							margin-bottom: 10rpx;

							.num-text {
								font-size: 32rpx;
							}
						}

						.foter-list-money {
							font-size: 30rpx;
							font-weight: 500;
							color: #FF5046;

							.money-unit {
								font-size: 24rpx;
							}
						}
					}

					.footer-triangle {
						width: 110%;
						padding-bottom: 40rpx;
						position: absolute;
						background: #fff;
						bottom: 0;
						bottom: -7%;
					}

					.footer-triangle-l {
						left: -16%;
						transform: rotateZ(28deg);
					}

					.footer-triangle-r {
						right: -16%;
						transform: rotateZ(-28deg);
					}

				}
				
				.list-main-on1{
					height: 440rpx;
				}

				.list-main-strewn {
					top: 20rpx;
				}

				.list-table {
					.list-table-header {
						border-bottom: 1rpx solid #D8D8D855;
						padding-bottom: 15rpx;
						margin-bottom: 20rpx;
						color: #9E9E9E;
						font-size: 34rpx;
					}

					.list-table-body {
						font-size: 34rpx;
						font-weight: 400;

						// .list-table-item {
						margin-bottom: 10rpx;

						.table-body-index {
							color: #9E9E9E;
						}

						.table-body-people {}

						.table-body-price {
							color: #FF5046;

							.price-unit {
								font-size: 24rpx;
							}
						}

					}
				}
			}

		}
	}
</style>